<template>
	<view>
		<u-notice-bar speed=40 color=#FF6347 :text="notice[0].notice"></u-notice-bar>
		<view class="head">
			<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
			<u-button type="success" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
				@click="selectMethod">选择预测算法</u-button>
		</view>

		<view class="winPercentage">
			<view>
				{{methodName}}--胜率:{{winPercentage}}
			</view>
		</view>
		<view class="record_box" v-for="item,index in predictionList">
			<view class="item_head">
				<view class="method_name">
					{{item.method}}
				</view>

				<view class="method_time">
					{{item.create_time}}
				</view>
			</view>
			<view class="item_body">
				<view :class="{kill: item.kill_room===item.prediction_room}">
					--{{item.games}}期--预测躲藏房间[{{item.prediction_room}}],杀手去了[{{item.kill_room}}]
				</view>
				<view :class="{kill: item.kill_room===item.prediction_room}">
					[{{item.kill_room==="???"?'结果等待中':item.win_count+"连胜中"}}]
				</view>
				<view v-if="item.kill_room===item.prediction_room"
					:class="{kill: item.kill_room===item.prediction_room}">
					[预测失败]
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import url from "../../js/url.js"
	export default {
		data() {
			return {
				token: null,
				show: false,
				//先返回名字，和胜率排行
				columns: [],
				methodName: "",
				allMethod: [],
				predictionList: [],
				winPercentage: null,
				notice: null,
				user_id: null

			}
		},
		onLoad() {
			this.getNotice()
			//页面加载的时候获取token
			const value = uni.getStorageSync('token');
			this.token = value
			const user_id = uni.getStorageSync('userId');
			this.user_id = user_id
			//页面加载，获取对应的算法名字和胜率
			uni.showLoading({
				title: '加载中'
			});
			this.getAllMethod();
			setInterval(() => {
				this.getMethod(this.methodName)
				uni.hideLoading()

			}, 3000)

		},
		methods: {
			selectMethod() {
				this.columns = []
				this.allMethod = []
				uni.request({
					url: 'http://' + url + '/prediction/name?user_id=' + this.user_id,
					header: {
						//自定义请求头信息
						'authentication': this.token
					},
					success: (res) => {
						for (let item in res.data.data) {
							this.allMethod.push(res.data.data[item].name + " 胜率" + res.data.data[item]
								.win_percentage+"%")
						}
						this.columns.push(this.allMethod)
					}
				});
				this.show = true
			},
			getAllMethod() {
				this.columns = []
				this.allMethod = []
				uni.request({
					url: 'http://' + url + '/prediction/name?user_id=' + this.user_id,

					header: {
						//自定义请求头信息
						'authentication': this.token
					},
					success: (res) => {
						for (let item in res.data.data) {
							this.allMethod.push(res.data.data[item].name + " 胜率" + res.data.data[item]
								.win_percentage+"%")
						}
						this.methodName = res.data.data[0].name
						this.columns.push(this.allMethod)
					}
				});
			},
			getMethod(method) {
				uni.request({
					url: 'http://' + url + '/prediction?method=' + method,
					header: {
						//自定义请求头信息
						'authentication': this.token
					},
					success: (res) => {
						this.predictionList = res.data.data.predictionList
						this.winPercentage = res.data.data.winPercentage
					}
				})
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				uni.showLoading({
					title: '加载中'
				});
				var index = e.value[0].indexOf(" ")
				this.methodName = e.value[0].substr(0, index)
				this.show = false
			},
			cancel() {
				this.show = false
			},
			getNotice() {
				//获取通知
				uni.request({
					url: 'http://' + url + '/record/notice',
					success: (res) => {
						// this.text = 'request success';
						this.notice = res.data.data
					}
				});
			}
		},

	}
</script>

<style>
	.winPercentage {
		width: 100%;
		font-size: 30rpx;
		display: flex;
		color: green;
		justify-content: center;
		align-items: center;
	}

	.kill {
		color: #dd6161;
	}

	.item_body {
		/* border: 1rpx solid black; */
		color: gray;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.item_head {
		font-size: 32rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		/* border: 1rpx solid black; */
	}

	.record_box {
		background-color: aliceblue;
		margin-top: 10rpx;
		padding: 15rpx;
		border-radius: 30rpx;
		/* border: 1rpx solid black; */
	}

	.item_h1 {
		width: 100%;
		height: 500rpx;
		color: skyblue;
	}

	.head {
		/* margin-top: 20rpx; */
		margin-bottom: 30rpx;
	}
</style>